<template>
  <div class="home">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <div class="home_top">
        <div class="nav">
          <van-image :src="navLeft" class="nav-left"/>
          <van-image :src="navRight" class="nav-right"/>
        </div>
        <div class="assets">
          <div class="assets_top"><span class="assets_top_left">总资产折扣</span><span
              class="assets_top_right">eBanking</span>
          </div>
          <div class="assets_center">
            <span class="assets_center_left">
              <img src="~assets/images/home/usd.png" alt="">
            </span>
            <span class="assets_center_center">82521.73</span>
            <span class="assets_center_right">USD</span>
          </div>
        </div>
      </div>
      <div class="notice">
        <van-notice-bar mode="link" background="#FAFAFA" color="#7D7D7D" left-icon="info-o">
          最新公告：这里是一条系统最新的公告信息
        </van-notice-bar>
      </div>
      <div class="list">
        <van-row>
          <van-col span="8">名称</van-col>
          <van-col span="12">拥有数量</van-col>
          <van-col span="4">涨跌幅</van-col>
        </van-row>
        <van-cell v-for="item in 8" :key="item" :to="'/mdetail/'+item">
          <img class="bar" src="~assets/images/home/red_bar.png" alt="" v-if="true">
          <img class="bar" src="~assets/images/home/green_bar.png" alt="" v-else>
          <span class="currency_icon"><van-image
              round
              width="0.8rem"
              height="0.8rem"
              :src="require('assets/images/home/icon_purse_btc30.png')"
          />
		      </span>
          <div class="currency">
            <div>BTC</div>
            <div>$12.3</div>
          </div>
          <div class="amount">
            <div>0.00000</div>
            <div>≈￥1.59</div>
          </div>
          <div :class="classObject">
            <span>-1.16%</span>
          </div>
        </van-cell>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    components: {},
    data() {
      return {
        navLeft: require('assets/images/home/QRpayIcon.png'),
        navRight: require('assets/images/home/scanQRIcon.png'),
        //涨跌幅绑定样式
        classObject: {
          "up": false,
          "down": true
        },
        isLoading: false
      }
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      }
    }
  }
</script>
<style scoped>
  .home_top {
    width: 100%;
    height: 792px;
    background-repeat: no-repeat;
    background-size: 100% 792px;
    background-color: white;
    background-image: url("~assets/images/home/bj.png");
  }

  .nav {
    height: 118px;
    width: 100%;
    line-height: 118px;
    background-color: white;
  }

  .nav-left {
    width: 63.5px;
    padding-left: 42px;
    display: inline-block;

  }

  .nav-right {
    width: 63.5px;
    padding-left: 857px;
    display: inline-block;
  }

  .assets {
    color: #fff;
    width: 1015px;
    height: 633px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    background-image: url("~assets/images/home/assets.png");
    background-size: 100%;
  }

  .assets_top {
    padding-top: 155px;
    text-align: left;
    padding-left: 69px;
  }

  .assets_top_left {
    font-size: 40px;
  }

  .assets_top_right {
    font-size: 67.6px;
    padding-left: 363px;
    font-weight: bold;
    font-style: oblique;
  }

  .assets_center {
    text-align: left;
    padding-left: 63px;
    margin-top: 37px;
  }

  .assets_center_left {
    vertical-align: middle;
  }

  .assets_center_center {
    padding-left: 38px;
    font-size: 60px;
    font-weight: bold;
  }

  .assets_center_left img {
    width: 102px;
  }

  .assets_center_right {
    padding-left: 7px;
    font-size: 43.1px;
  }

  .notice {
    margin-top: 39px;
  }

  .list {
    padding-top: 18px;
    font-size: 36px;
    font-weight: bold;
    text-align: left;
  }

  .bar {
    height: 113px;
  }

  .van-cell {
    padding: 0;
    position: relative;
  }

  .van-row {
    padding: 20px 50px;
  }

  .currency_icon {
    padding-left: 36px;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .currency {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 128px;
  }

  .amount {
    display: inline-block;
    padding-left: 386px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .down {
    background-image: url("~assets/images/home/icon_decline.png");
    height: 113px;
    background-size: 150px 113px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 150px;
    margin-left: 860px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .up {
    background-image: url("~assets/images/home/icon_gain.png");
    height: 113px;
    background-size: 150px 113px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 150px;
    margin-left: 860px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .up span {
    height: 113px;
    line-height: 113px;
    color: green;
  }

  .down span {
    height: 113px;
    line-height: 113px;
    color: red;
  }
</style>
